<template>
  <div class="CateItem" @click="routertoitem">
    <div v-for="item in cartlist" class="CateItem-b">
      <div class="pick"></div>

      <div class="right">
        <div class="shop">
          <img src="../../../assets/images/category/店铺.svg" alt="" />
          <!-- 店铺名称 -->
          <span>{{ item.name }}</span>
        </div>
        <div class="right-A">
          <div class="left">
            <img :src="item.img" alt="" />
          </div>
          <div class="right-a-right">
            <span class="title">{{ item.title }}</span>

            <span class="desc">{{ item.desc }}</span>

            <div class="countp">
              <span class="prize">￥{{ item.prise }}</span>
              <span class="count">数量:{{ item.count }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>



  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  name: "CateItem",
  components: {},
  props: {
    product: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  computed: {
    ...mapGetters(["cartlist"]),
  },
  methods: {
    routertoitem() {
      this.$router.push("/detail/" + cartlist.item.iid);
      console.log("跳转");
    },
  },
};
</script>

<style scoped>
.CateItem{
    background-color: #DCDCDC;
}
.shop {
    margin-left: 2vw;
}
.shop img{
    width: 8vw;
}
.shop span{
    margin-left: 3vw;
    font-weight: bold;
    font-size: 4vw;
}
.right-a-right{
    display: grid;
    width: 100%;
}
.right-A {
  display: flex;
}
.shop {
  display: flex;
  height: 10vw;
  line-height: 10vw;
}
.CateItem {
  height: 100%;
  /* background: blueviolet */
  /* background-color: #69695A; */
  margin-bottom: 20vw;
}
.left {
  width: 40%;
  border-radius: 2vw;
}
.left img {
  width: 100%;
  border-radius: 2vw;
  height: 28vw;

}
.CateItem-b {
  display: flex;
    margin: 0 auto;
  width: 98%;
  height: 40vw;
  margin-bottom: 2vw;
  /* margin-top: 2vw; */
  border: 1px dashed #333333;
  background-color: #fff;
  border-radius: 3vw;
      padding-bottom: 2vw;
    padding-top: 2vw;

}
.right {
  display: grid;
  width: 100%;
  margin-left: 3vw;
}
.title {
  width: 92%;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
  line-height: 7vw;
  height: 7vw;
  padding-left: 3vw;
}
.desc {
  width: 92%;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
  line-height: 5vw;
  height: 5vw;
  margin-left: 3vw;
  background-color: gainsboro;
}
.countp {
  display: flex;
  justify-content: space-around;
}
</style>